<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Demo: Progammatic Layout</title>
	
	<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/claro.css" media="screen">
	
	
	<style type="text/css">
	
		html, body {
    height: 100%;
    
}

#appLayout {
    height: 100%;
}
#leftCol {
    width: 200px;
}



	</style>
</head>
<body class="claro">
<div id="appLayout" class="demoLayout"></div>
<div id="startContent">
	<h4>Starting Content</h4>
	<button id="createTabBtn">Add another tab</button>
</div>
<!-- load dojo -->
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<script>
	require(["dojo/on", "dojo/dom", "dijit/registry", "dijit/layout/BorderContainer", "dijit/layout/TabContainer", "dijit/layout/ContentPane", "dojo/domReady!"],
			function(on, dom, registry, BorderContainer, TabContainer, ContentPane){
				function addTab(name) {
					var pane = new ContentPane({
						title: name,
						content: "<h4>" + name + "</h4>"
					});
					registry.byId("contentTabs").addChild(pane);
				}

				// create the BorderContainer and attach it to our appLayout div
				var appLayout = new BorderContainer({
					design: "headline"
				}, "appLayout");


				// create the TabContainer
				var contentTabs = new TabContainer({
					region: "center",
					id: "contentTabs",
					tabPosition: "bottom",
					"class": "centerPanel",
					href: "contentCenter.html"
				});

				// add the TabContainer as a child of the BorderContainer
				appLayout.addChild( contentTabs );

				// create and add the BorderContainer edge regions
				appLayout.addChild(
						new ContentPane({
							region: "top",
							"class": "edgePanel",
							content: "Header content (top)"
						})
				);
				appLayout.addChild(
						new ContentPane({
							region: "left",
							id: "leftCol", "class": "edgePanel",
							content: "Sidebar content (left)",
							splitter: true
						})
				);

				// Add initial content to the TabContainer
				contentTabs.addChild(
						new ContentPane({
							title: "Start"
						}, "startContent")
				);

				var tabCounter = 1;
				on(dom.byId("createTabBtn"), "click", function(evt){
					addTab("Tab " + (++tabCounter));
				});

				// start up and do layout
				appLayout.startup();
			});
</script>
</body>
</html>
